<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户界面</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<script src="/layui/layui.js"></script>
<script id="bookToolBar" type="text/html">
    <button class="layui-btn layui-btn-sm" lay-event="insert"><i
            class="layui-icon">&#xe654;</i>新增
    </button>
    <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
    <div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="search"><i
            class="layui-icon layui-icon-search"></i></div>
    <input type="text" id="bookName" style="width:200px;float:right;height:30px;" placeholder="请输入书本名称"
           autocomplete="off" class="layui-input">
</script>
<script type="text/javascript">
    //加载表格
    layui.use(['table'], function () {
        var form=layui.form,$=layui.jquery,table = layui.table;
        table.render({
            elem: '#book'
            , url: '/selectBook?'
            , toolbar: '#bookToolBar'
            , page: true,
            limits: [5, 8, 10, 15]
            , cellMinWidth: 80
            , cols: [[
                {field: 'bookId', title: '书本ID', sort: true}
                , {field: 'bookName', title: '书本名称'}
                , {field: 'bookPrice', title: '书本价格', sort: true}
                , {field: 'bookDesc', title: '书本描述'}
                , {fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}

            ]]
        });

        table.on('toolbar(book)', function (obj) {

            if (obj.event == 'insert') {
                layer.open({
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['720px', '720px'], //宽高
                    content: 'insertBook.html'
                });
                    layer.close(obj);
            } else if (obj.event == 'search') {
                var txt = $("#bookName").val();
                alert(txt)
                table.reload(" " +
                    "'", {
                    where: {//设置需要传递的参数
                        bookName: txt
                    },
                    page: {
                        //表示查询从第一页开始
                        curr: 1
                    }
                });
            }

        });
        table.on('tool(book)',function (obj) {
            var data=obj.data;
            var bookObj=$.parseJSON(JSON.stringify(data));
            if(obj.event == 'edit'){
                alert('修改事件触发');
                form.val("editform",bookObj);
                layer.open({
                    type:1, //iframe 内嵌窗口
                    title: '修改书本信息',
                    area:['720px', '720px'],
                    content: $("#editContent")
                });
            }else if (obj.event == 'del'){
                $.post(
                    "deleteBook",
                    data,
                    function (msg) {
                        alert(msg)
                    }
                )
            }
        });
        form.on('submit(editform)' ,function () {
            var formData= form.val("editform");
            $.post(
                "updateBook",
                formData,
                function (msg) {
                    alert(msg);
                }
            )
        });
    });


</script>
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i
            class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon">&#xe640;</i>删除</a>

</div>
<table id="book" lay-filter="book"></table>

<div id="editContent"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用-->
    <form id="editform" lay-filter="editform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <!--标签-->
            <label class="layui-form-label">书本Id</label>
            <div class="layui-input-inline">
                <!--输入框  lay-verify =“required” 必填-->
                <input type="text" name="bookId" lay-verify="required"
                       readonly  autocomplete="off" placeholder="请输入书本ID" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">书本名称</label>
            <div class="layui-input-inline">
                <input type="text" name="bookName" lay-verify="required"
                       autocomplete="off" placeholder="请输入书本名称:" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">书本价格：</label>
            <div class="layui-input-inline">
                <input type="number" name="bookPrice" lay-verify="required"
                       autocomplete="off" placeholder="请输入书本价格:" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">书本描述信息：</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入书本描述信息" class="layui-textarea" name="bookDesc"></textarea>
            </div>
        </div>
        <div style="position: absolute; bottom: 0px; left: 45%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn" lay-submit="" lay-filter="editsubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
</body>
</html>